<template>
  <view class="wrap bd t1">
    <view class="tap1">
      <p>收缩压</p>
      <u-input
        v-model="kf"
        type="number"
        :border="border"
        placeholder="请输入收缩压"
        @input="checkNum($event, 1)"
        placeholder-style="color:#e1e1e1"
      />
      <span class="dw">mmHg</span>
    </view>
    <view class="tap1">
      <p>舒张压</p>
      <u-input
        v-model="ch"
        type="number"
        :border="border"
        placeholder="请输入舒张压"
        @input="checkNum($event, 2)"
        placeholder-style="color:#e1e1e1"
      />
      <span class="dw">mmHg</span>
    </view>
    <view class="tap12">
      <u-row gutter="16">
        <u-col span="4">
          <view class="demo-layout bg-purple-light">采集日期</view>
        </u-col>
        <u-col span="8">
          <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
          <u-button @click="show = true" class="b2t bd t1">{{ year }}</u-button>
          <u-icon name="order" class="icons"></u-icon>
        </u-col>
      </u-row>
    </view>
    <view class="tap1">
      <u-button
        class="custom-style"
        :ripple="true"
        ripple-bg-color="#93daf5"
        @click="save"
        >保存</u-button
      >
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      kf: "", //收缩压
      ch: "", //舒张压
      border: true,
      show: false,
      mode: "date",
      year: "",
      idx: "",
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
    };
  },
  onLoad: function (option) {
    // //console.log(option.gaoya)
    //console.log(option.id)
    this.kf = option.gaoya;
    this.ch = option.diya;
    this.year =
      option.datas || this.formatDate(new Date(), "yyyy-MM-dd-hh:mm:ss");
    this.idx = option.id;
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    checkNum(e, type) {
      let val = e.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.kf = "";
        } else if (type == 2) {
          this.ch = "";
        }
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.kf = val;
        } else if (type == 2) {
          this.ch = val;
        }
      });
    },
    change(e) {
      //console.log(e)
      let fintime = e.result + " " + this.formatDate(new Date(), "hh:mm:ss");
      this.year = fintime;
    },
    save() {
      let hei = this.kf;
      let low = this.ch;
      //console.log(low)
      if (typeof hei === "undefined" && typeof low === "undefined") {
        uni.showToast({
          title: "请输入内容",
          icon: "none",
        });
      } else {
        const reg = /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/;
        if (!reg.test(hei)) {
          uni.showToast({
            title: "请输入正确的收缩压，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (hei < 10 || hei > 200) {
          uni.showToast({
            title: "收缩压的范围在10-200之间",
            icon: "none",
          });
          return;
        }
        if (!reg.test(low)) {
          uni.showToast({
            title: "请输入正确的舒张压，如有小数请保留至后两位小数",
            icon: "none",
          });
          return;
        }
        if (low < 10 || low > 201) {
          uni.showToast({
            title: "舒张压的范围在10-200之间",
            icon: "none",
          });
          return;
        }
        let self = this;
        uni.showLoading({
          title: "加载中",
          mask: true,
        });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/oldbooldInfo/addOldBooldPressura", {
            bloodPressureSs: hei,
            bloodPressureSz: low,
            createTime: self.year,
            id: self.idx || "",
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              this.$refs.uToast.show({
                title: "保存成功",
                type: "success",
              }),
                uni.navigateTo({
                  url: "./xyjilu",
                  animationType: "pop-in",
                  animationDuration: 200,
                });
            } else {
              uni.showToast({
                title: "请输入内容",
                icon: "none",
              });
            }
          });
      }
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      let o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds(),
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          );
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ("00" + str).substr(str.length);
    },
  },
};
</script>


<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #ffffff;
  padding: 30rpx;

  .tap1 {
    margin-bottom: 40rpx;
    position: relative;

    p {
      text-align: center;
      margin-bottom: 30rpx;
      font-size: 28rpx;
      font-weight: bold;
    }

    .dw {
      position: absolute;
      right: 80rpx;
      top: 88rpx;
      color: #dadada;
    }

    .custom-style {
      background-color: #1dc7e0;
      border: none;
      color: #f0f5ff;
    }
  }

  .tap12 {
    margin-bottom: 90rpx;
    position: relative;

    .bt {
      color: #959595;
    }

    .icons {
      position: absolute;
      top: 30%;
      right: 36rpx;
      z-index: 1;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> input {
    color: #ccc !important;
  }
}
</style>